import React, { Component } from 'react';
import {Route,withRouter} from 'react-router-dom'
import "../assets/font_r9skc8oni9/iconfont.css"
import "../styles/Tabber.scss"

class Tabbar extends Component {
    state = {
        tabs:[
            {
                bool: true,
                key: '/index/shouye',
                title: '首页',
                icon: "iconfont icon-shouye" 
            },
            {
                bool: false,
                key: '/index/Fenlei',
                title: '分类',
                icon: "iconfont icon-fenlei" ,
            },
            {
                bool: false,
                key: '/index/Car',
                title: '购物车',
                icon:"iconfont icon-quanbudingdan " ,
            },
            {
                bool: false,
                key: '/index/Mine',
                title: '我的',
                icon: "iconfont icon-wode" ,
            },
        ]
    }
    toLogin(){
        //跳路由
        this.props.history.push('/login');
    }
    handleChange(item,index){
       this.state.tabs.forEach((item,index)=>{
           item.bool=false
       })
       item.bool=true
            this.props.history.push(item.key);
     
    }
    render() {
        //默认所有通过路由匹配渲染出来的组件, 组件的props中都会自动添加history,location,match三个路由对象
        //其他不是通过路由匹配渲染出来的组件, props默认是空的.
        //history 负责跳路由
        //location 负责保存路由相关参数
        //match 负责保存路由相关参数
        console.log('tabbar',this.props);
        return (
      
            <div className='tabbar' >
                {
                    this.state.tabs.map((item,index) => {
                        return (
                           <div className={` ${item.bool?"active":"item"}`}  key={item.key} onClick={()=>{this.handleChange(item,index)}}>
                                  <span className={item.icon}></span>
                                     <div>{item.title}</div>
                           </div>
                        )
                    })
                }
            </div>
        );
    }
}

//自定义withRouter
function myWithRouter(Com){
    return class extends Component {
        render() {
            return (
                <Route component={Com} />
            );
        }
    }
}

//withRouter是路由库提供的高阶组件,它可以给当前组件动态添加location,history,match三个路由对象到props中.
export default withRouter(Tabbar);